<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
	<div class="bignav">
		<div class="nav cl clearfix">
			<ul class="nav-left clearfix">
				<li>你好，欢迎来到多迪梦工厂</li>
				<li><a href="">登录</a></li>
				<li><a href="">免费注册</a></li>
			</ul>
			<ul class="nav-right clearfix">
				<li><a href="">收藏本站</a></li>
				<li><a href="">我的订单</a></li>
				<li><a href="">购物车<span style="color:red">0</span>件</a></li>
			</ul>
		</div>
	</div>
	<div class="logo cl clearfix">
		<div class="logo-left">
			<img src="img/1.png" alt="">
			<h2>多迪梦工厂</h2>
		</div>
		<div class="logo-right">
			<h2>会员注册</h2>
		</div>
	</div>
	<div class="news cl">
		<span><a href="">邮箱注册</a></span>
		<span><a href="">手机号码注册</a></span>
	</div>
	<form  name="regname" action='https://www.baidu.com/'>
		<ul class="tab clearfix cl">
			<li>
				<div class="tr"><span>*</span>账户名:</div><input name="username" type="text">
				<span id="account"></span>
			</li>
			<li>
				<div class="tr"><span>*</span>设定登录密码:</div><input name="passworld" type="password">
				<span id="passworld"></span>
			</li>
			<li>
				<div class="tr"><span>*</span>再次输入密码:</div><input name="passworldConf" type="password">
				<span id="pd"></span>
			</li>
			<li>
				<div class="tr"><span>*</span>验证邮箱:</div><input name="email" type="text">
				<span id="mail"></span>
			</li>
			<li>
				<div class="tr"><span>*</span>验证码:</div><input name="yzm"type="text">
				<i id="tu"></i>
				<span id="code"></span>
			</li>
			<li>
				<input  id = "check" type="checkbox" name="check">
				我已经自习阅读并接受<span style="color:red">《用户注册协议书》</span>
				<span id="xuan"></span>
			</li>
			<li>
				<input id="zhuce" type="submit" value="同意以上条款并注册" onclick="return checkForm()">
			</li>
		</ul>
	</form>
</div>
</body>
<script src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
		var zhuce = document.querySelector("#zhuce");
		var account = document.querySelector("#account");
		var pasd = document.querySelector("#passworld");
		var pd = document.querySelector("#pd");
		var email = document.querySelector("#mail");
		var xuan = document.querySelector("#xuan");
		var code = document.querySelector("#code");
		var tu = document.querySelector("#tu");

		var reg = document.forms["regname"];
		var username = regname.username;
		var passworld = regname.passworld;
		var passworldConf = regname.passworldConf;
		var mail = regname.email;
		var ck = regname.check;
		var yzm = regname.yzm;

		var user = /^[a-z]\w{5,18}$/i;
		var pass = /\w{6,18}/;
		var youxiang = /^\w+@[a-z\d]+\.[a-z]+$/i;
		// 验证码
		var str = "0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM"
		var math = "";
		for (var i = 0; i < 4; i++) {
			math += str[parseInt(Math.random()*62)];
		}
		tu.innerHTML = math;
		tu.onclick = function(){
			var math = "";
			for (var i = 0; i < 4; i++) {
				math += str[parseInt(Math.random()*62)];
			}
			tu.innerHTML = math;
				if(yzm.value==""){
					code.innerHTML="<font color=red>请输入验证码！</font>";
				}
				if(yzm.value!=tu.innerHTML){
					code.innerHTML="<font color=red>请输入正确验证码！</font>";
				}
				if(yzm.value==tu.innerHTML){
					code.innerHTML="<font color=green size=5px>√</font>";
				}
		}
	function checkForm(){
		var status=true;
		if(!user.test(username.value)){
			account.innerHTML = "6~18个字符,需以字母开头,";
			status=false;
		}
		if(user.value==""){
			account.innerHTML = "用户名不能为空";
			status=false;
		}
		if(!pass.test(passworld.value)){
			pasd.innerHTML = "6~18个字符,字母，数字，下划线";
			status=false;
		}
		if(passworld.value==""){
			pasd.innerHTML="密码不能为空";
			status=false;
		}
		if(passworldConf.value==""){
			pd.innerHTML="重复密码不能为空";
			status=false;
		}
		if(!youxiang.test(mail.value)){
			email.innerHTML = "请输入正确的邮箱";
			status=false;
		}
		if(yzm.value==""){
			code.innerHTML = "验证码不能为空";
			status=false;
		}
		if(!ck.checked){
			xuan.innerHTML = "请接受服务条款";
			status=false;
		}
		return status;
	}
	username.onfocus = function(){
		account.innerHTML = "<font color=#999>请输入用户名</font>";
	}
	passworld.onfocus = function(){
		pasd.innerHTML = "<font color=#999>请输入密码</font>"
	}
	passworldConf.onfocus = function(){
		pd.innerHTML = "<font color=#999>请再次输入密码</font>"
	}
	mail.onfocus = function(){
		email.innerHTML = "<font color=#999>请输入邮箱</font>"
	}
	yzm.onfocus = function(){
		code.innerHTML = "<font color=#999>请输入验证码</font>"
	}
	username.onblur = function (){
		if(user.test(username.value)){
			account.innerHTML="<font color=green size=2px>√</font>";
		}else if(username.value==""){
			account.innerHTML="<font color=red>请输入用户名</font>";
		}
		else{
			account.innerHTML="6~18个字符，可使用字母、数字、下划线，需以字母开头"
		}
	}
	passworld.onblur = function () {
		if(pass.test(passworld.value)){
			pasd.innerHTML = "<font color=green size=2px>√</font>"
		}else {
			pasd.innerHTML="<font color=red>6~18个字符，可使用字母、数字.</font>";
		}
		if(passworld.value==""){
			pasd.innerHTML="<fontcolor=red>请输入密码</font>";
		}
		if(passworld.value!=""&&passworldConf.value!=""){
			if(passworld.value!=passworldConf.value){
				pasd.innerHTML="<fontcolor=red>密码不一致</font>";
			}
		}
	}
	passworldConf.onblur = function() {
		if(pass.test(passworldConf.value)&&passworldConf.value == passworld.value){
			pasd.innerHTML = "<font color=green size=2px>√</font>"
			pd.innerHTML="<font color=green size=2px>√</font>";
		}else{
			pd.innerHTML = "<font color=red>密码不一致</font>";
		}
		if(passworldConf.value==passworld.value&&!pass.test(passworldConf.value)){
					pd.innerHTML="<font color=red>6~18个字符，可使用字母、数字、</font>";
		}
		if(passworldConf.value==""){
					pd.innerHTML="<font color=red>请输入确认密码！</font>";
				}
	}
	mail.onblur = function (){
		if(youxiang.test(mail.value)){
			email.innerHTML = "<font color=green size=2px>√</font>"
		}else{
			email.innerHTML="<font color=red>请输入邮箱！</font>";
		}
	}
	yzm.onblur=function(){
		if(yzm.value==""){
			code.innerHTML="<font color=red>请输入验证码！</font>";
		}
		if(yzm.value!=tu.innerHTML){
			code.innerHTML="<font color=red>请输入正确验证码！</font>";
		}
		if(yzm.value==tu.innerHTML){
			code.innerHTML="<font color=green size=5px>√</font>";
		}
	}
</script>
</html>